<!--{template common/header_simple_start}-->
<link href="static/css/common.css?{VERHASH}" rel="stylesheet" media="all">
<link href="user/scripts/jquery.cropbox.css?{VERHASH}" rel="stylesheet" media="all">
<script type="text/javascript" src="user/scripts/hammer.js"></script>
<script type="text/javascript" src="user/scripts/jquery.mousewheel.js"></script>
<script type="text/javascript" src="user/scripts/jquery.cropbox.js"></script>
<script type="text/javascript" src="static/js/jquery.leftDrager.js?{VERHASH}"></script>

<!--{template common/header_simple_end}-->
<div class="bs-container clearfix">
	<div class="bs-left-container  clearfix">
		<!--{template left}-->
	</div>
	<div class="left-drager">
		<div class="left-drager-op">
			<div class="left-drager-sub"></div>
		</div>
	</div>
	<div class="bs-main-container  clearfix">
		<div class="main-content" style="padding:20px;">
			<script type="text/javascript">
				function updateavatar() {
					window.location.href = document.location.href.replace('&reload=1', '') + '&reload=1';
				}
			</script>
			<form id="avatar_form" method="post" autocomplete="off" action="user.php?mod=avatar">
				<input type="hidden" name="formhash" value="{FORMHASH}" />
				<input id="imagedata" type="hidden" name="imagedata" value="" />
				<input id="aid" type="hidden" name="aid" value="0" />
				<input type="hidden" name="avatarsubmit" value="true" />
			</form>
			<h4>{lang set_avatar}</h4>
			<p>{lang setting_avatar_message}</p>
			<p>{lang setting_avatar_message1}</p>

			<div class="crop-container clearfix" style="margin-bottom:10px;">
				<img class="cropimage" src="avatar.php?uid=$_G[uid]&size=big&ramdom=1" />
			</div>
			<div class=" clearfix">
				<div class="pull-left" style="position:relative;padding:5px;overflow:hidden">
					<button class="btn btn-success">{lang upload_image}</button>
					<input id="upload" name="files[]" tabIndex="-1" style="position: absolute;outline:none; filter: alpha(opacity=0); PADDING-BOTTOM: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font-family: Arial; font-size: 180px;height:40px;width:86px;display:inline-block;top: 0px; cursor: pointer; right: 0px; padding-top: 0px; opacity: 0;direction:ltr;background-image:none" type="file" accept="image/png,image/gif,image/jpeg">
				</div>
				<div class="pull-left ml20" style="padding:5px;"><button type="button" id="avatar_form_btn" data-loading-text="{lang are_uploading}" class="btn btn-danger" onclick="return validate()" disabled="disabled">{lang save_avatar}</button></div>
			</div>

		</div>
	</div>
</div>
<script type="text/javascript">
	jQuery('.left-drager').leftDrager_layout();
	jQuery(document).ready(function(e) {
		var corp = jQuery('.cropimage').cropbox({ width: 200, height: 200, showControls: 'auto', label: '{lang drag_move}' })
			.on('cropbox', function(event, results, img) {
				//jQuery('.myavatar img').attr('src',img.getDataURL());
			});
		if(window.FileReader) {
			jQuery('#upload').on('change', function() {
				var reader = new FileReader();
				reader.onload = function(e) {
					jQuery('.cropimage').attr('src', e.target.result);
					jQuery('#avatar_form_btn').prop('disabled',false);
					jQuery('.cropimage').cropbox({ width: 300, height: 300, showControls: 'auto', label: '{lang drag_move}' })
				}
				reader.readAsDataURL(this.files[0]);
				this.files = null;
			})
		} else {
			jQuery('#upload').fileupload({
				url: 'user.php?mod=avatar&do=imageupload',
				dataType: 'json',
				autoUpload: true,
				maxChunkSize: 2000000, //2M
				maxFileSize: 5000000, // 5 MB
				acceptFileTypes: new RegExp("(\.|\/)([jpeg|jpg|gif|png|bmp])$", 'i'),
				dropZone: jQuery('.crop-container'),
				pasteZone: jQuery('.crop-container'),
				sequentialUploads: true

			}).on('fileuploadfail', function(e, data) {
				jQuery.each(data.result.files, function(index, file) {
					if(file.error) {
						showmessage(json.error, 'danger', 3000, 1);
					}
				});
			}).on('fileuploaddone', function(e, data) {
				jQuery.each(data.result.files, function(index, file) {
					if(file.error) {
						showmessage(json.error, 'danger', 3000, 1);
					} else {
						jQuery('#aid').val(file.data.aid);
						jQuery('.cropimage').attr('src', file.data.img);
						jQuery('#avatar_form_btn').prop('disabled',false);
						jQuery('.cropimage').cropbox({ width: 300, height: 300, showControls: 'auto', label: '{lang drag_move}' })
					}
				});
			});
		}
	});

	function validate() {
		var inst = jQuery('.cropimage').data('cropbox');
		jQuery('#imagedata').val(inst.getDataURL());
		jQuery('#avatar_form_btn').button('loading');
		jQuery.post('user.php?mod=avatar', jQuery('#avatar_form').serialize(), function(json) {
			if(json.msg == 'success') {
				showmessage('{lang avatar_uploaded_successfully_time}', 'success', 3000, 1);
				window.setTimeout(function() { window.location.href = 'user.php?mod=avatar&t=' + new Date().getTime(); }, 3000);
			} else {
				showmessage(json.error, 'success', 3, 1);
			}
			jQuery('#avatar_form_btn').button('reset');
		}, 'json');
		return false;
	}
</script>
<script src="static/bootstrap/js/bootstrap.min.js?{VERHASH}"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script type="text/javascript" src="dzz/scripts/jquery_file_upload/jquery.ui.widget.js?{VERHASH}"></script>
<script type="text/javascript" src="dzz/scripts/jquery_file_upload/jquery.iframe-transport.js?{VERHASH}"></script>
<!-- The basic File Upload plugin -->
<script type="text/javascript" src="dzz/scripts/jquery_file_upload/jquery.fileupload.js?{VERHASH}"></script>
<script type="text/javascript" src="dzz/scripts/jquery_file_upload/jquery.fileupload-process.js?{VERHASH}"></script>
<script type="text/javascript" src="dzz/scripts/jquery_file_upload/jquery.fileupload-validate.js?{VERHASH}"></script>

<!--{template common/footer_simple}-->